<template>
  <backContainer>
    <div class="flex">
      <!-- 任务列表 -->
      <card v-loading="treeloading" :width="300" :title="courseName">
        <div slot="title">
          <div class="allExpand">
            <div @click="handlechange" class="btns">
              <img
                v-if="!isClose"
                src="@/assets/images/courseAdd/expand.png"
                alt="加载失败"
              />
              <img v-else src="@/assets/images/courseAdd/shrink.png" alt="加载失败"/>
              {{ !isClose ? '展开' : '收起' }}
            </div>
          </div>
        </div>
        <div class="task">
          <courseTrees
            ref="course_trees_ref"
            type="detial"
            :indexId="cacheIndexId"
            :data="courseIndexTree"
            @refreshContent="refreshData"
            @continueRefresh="continueRefresh"
            @handleClick="handleClick"
          >
          </courseTrees>
        </div>
      </card>
      <!-- 任务介绍 -->
      <card
        v-loading="loading"
        titleWidth="450"
        :width="884"
        style="margin-left: 16px"
        :title="dynamicTitle"
      >
        <div class="flex titleslot" slot="title">
          <!-- 作业2.1.2新增 -->
          <div
            class="flex"
            v-if="
              (selectedType == 3 || selectedType == 4) && ContentInfo.homeworkId
            "
          >
            <span>作业:</span>

            <span
              style="color: #4e8dff; margin-right: 5px; margin-left: 5px"
              v-if="
                ContentInfo.homeworkStatus == 1 ||
                ContentInfo.homeworkStatus == -1
              "
            >{{ ContentInfo.homeworkScore }}分</span
            >
            <span style="color: #4e8dff" v-if="ContentInfo.homeworkStatus == 0">未开始</span>
            <span style="color: #4e8dff" v-if="ContentInfo.homeworkStatus == 2">进行中</span>
            <span style="color: #4e8dff" v-if="ContentInfo.homeworkStatus == 3">待批改</span>
            <span style="color: #4e8dff" v-if="ContentInfo.homeworkStatus == 4">已退回</span>
          </div>
          <!-- 线上考核 -->
          <div
            style="margin-left: 48px"
            class="flex"
            v-if="
              (selectedType == 3 || selectedType == 4) && ContentInfo.examId
            "
          >
            <span>考核:</span>
            <span
              style="color: #fa6400; margin-right: 5px; margin-left: 5px"
              v-if="ContentInfo.examStatus == 1 || ContentInfo.examStatus == -1"
            >
              {{ ContentInfo.score }}分
            </span>
            <span style="color: #fa6400" v-if="ContentInfo.examStatus == 0"
            >未开始</span
            >
            <span style="color: #fa6400" v-if="ContentInfo.examStatus == 2"
            >进行中</span
            >
            <span style="color: #fa6400" v-if="ContentInfo.examStatus == 3"
            >待批改</span
            >
            <span style="color: #fa6400" v-if="ContentInfo.examStatus == 4"
            >已退回</span
            >
            <span style="color: #fa6400" v-if="ContentInfo.examStatus == 1"
            >已通过</span
            >
            <span style="color: #fa6400" v-if="ContentInfo.examStatus == -1"
            >未通过</span
            >
            <!-- <span style="color: #999999" v-if="examStatus == 0">未开始</span>
            <span class="acting" v-if="examStatus == 2">进行中</span>
            <span class="acting" v-if="examStatus == 3">待批改</span>
            <span class="acting" v-if="examStatus == 4">已退回</span>
            <span class="pass" v-if="examStatus == 1">已通过</span>
            <span class="nopass" v-if="examStatus == -1">未通过</span> -->
          </div>
          <!-- 参考按钮 -->
          <img
            style="margin-left: 30px"
            @click="routeTo"
            class="group_enter_icon"
            src="@/assets/images/courseAdd/group_enter_icon.png"
            alt="加载失败"
          />
        </div>
        <taskFormInfo
          ref="task_ref"
          v-if="selectedType == 1 || selectedType == 2"
          :selectedTaskId="selectedId"
          :selectedType="selectedType"
          :courseStuId="$route.query.courseStuId"
        ></taskFormInfo>
        <contentFormInfo
          @sendContentInfo="getContentInfo"
          ref="content_ref"
          @finishStudy="finishStudy"
          @updateExamStatus="updateExamStatus"
          v-else-if="selectedType == 3 || selectedType == 4"
          :selectedContentId="selectedId"
          :courseIndexStuId="courseIndexStuId"
          :studyRecordId="studyRecordId"
          :dirName="dirName"
          :leaderId="leaderId"
          :examSubmitType="examSubmitType"
          :courseStuId="$route.query.courseStuId"
        >
        </contentFormInfo>
        <el-empty
          v-else
          style="margin-top: 80px"
          description="暂无信息~"
        ></el-empty>
      </card>
    </div>
  </backContainer>
</template>

<script>
import { getCourseStudyInfo } from '@/api/home'
import { finishStudyContent, recordStudyTime } from '@/api/course/course'
import courseTrees from './components/courseTrees'
import { changeItemById, formatTreeData,getSiblingItem } from './formatTreeData'
import contentFormInfo from './components/contentFormInfo'
import taskFormInfo from './components/taskFormInfo'
import {findItemById} from "@/views/tea_course/formatTreeData";

export default {
  name: 'taskList',
  components: { courseTrees, contentFormInfo, taskFormInfo },
  props: {},
  data() {
    return {
      cacheIndexId: this.$route.query.indexId,
      courseType: '',
      isClose: true,
      courseIndexTree: [],
      dynamicTitle: '',
      //树结构选中的indexId
      selectedId: '',
      //小组模式还是普通模式  1.普通模式  2.小组模式
      examSubmitType: '',
      //树结构选中的学习记录Id
      studyRecordId: '',
      selectedType: '',
      courseIndexStuId: '',
      //内容层考核状态（考试状态 0.未开始 1.已通过 2.进行中 3.待批改 -1.未通过）
      examStatus: '',

      treeloading: false,
      loading: false,
      courseSchedulingId: '',
      //   课程信息（包含章节）
      courseName: '',
      dirName: '',
      //组长id
      leaderId: '',
      //学习开始时间
      studyStartTime: null,
      ContentInfo: {}
    }
  },
  watch: {},
  methods: {
    getContentInfo(e) {
      this.ContentInfo = e
      console.log(e)
    },
    updateExamStatus(e) {
      this.examStatus = e
    },
    routeTo() {
      console.log(this.courseSchedulingId, 'courseSchedulingId')
      this.$router.push({
        path: '/scoreInfo',
        query: {
          courseId: this.$route.query.courseId,
          courseStuId: this.$route.query.courseStuId,
          courseSchedulingId: this.$route.query.courseSchedulingId,
          courseType: this.courseType
        }
      })
    },
    //继续学习
    continueRefresh(item) {
      this.dynamicTitle = item.indexName
      this.selectedId = item.indexId
      this.studyRecordId = item.id
      this.selectedType = item.type
      this.examSubmitType = item.examSubmitType
      this.examStatus = item.examStatus
      this.studyStartTime = new Date().getTime()
    },
    //组件缓存处理，更新树结构右边数据
    refreshData(e) {
      this.$nextTick(() => {
        if (e == 3 || e == 4) {
          this.$refs.content_ref.getInfo()
        } else {
          this.$refs.task_ref.getInfo()
        }
      })
    },
    async finishStudy(e) {
      let studyTimeData = 1
      if (this.studyStartTime) {
        studyTimeData = (new Date().getTime() - this.studyStartTime) / 1000
      }
      let res = await finishStudyContent(
        this.studyRecordId,
        Math.ceil(studyTimeData)
      )
      if (res.code == 200) {
        this.$modal.msgSuccess('完成学习成功')
        this.studyStartTime = null
        changeItemById(this.courseIndexTree, e)
        this.$refs.content_ref.getInfo()
      }
    },
    // 展开关闭操作
    handlechange() {
      this.isClose = !this.isClose
      if (this.isClose) {
        this.$refs.course_trees_ref.expandAll()
      } else {
        this.$refs.course_trees_ref.collapseAll()
      }
    },
    handleClick(e) {
      //判断是否点击的是同一个内容层
      if (e.indexId != this.selectedId) {
        //判断上一次有没有选中过内容层
        if (
          this.selectedType &&
          (this.selectedType == 3 || this.selectedType == 4)
        ) {
          //判断是否有开始  说明还未记录学习时间
          if (this.studyStartTime) {
            let studyTimeData =
              (new Date().getTime() - this.studyStartTime) / 1000
            recordStudyTime(this.studyRecordId, Math.ceil(studyTimeData)).then(
              (res) => {
                if (res.code == 200) {
                  console.log('记录学习时间:', studyTimeData)
                  this.studyStartTime = null
                }
              }
            )
          }
        }
      }
      this.dynamicTitle = e.indexName
      this.selectedId = e.indexId
      this.courseIndexStuId = e.id
      //小组模式还是普通模式  1.普通模式  2.小组模式
      this.examSubmitType = e.examSubmitType
      this.studyRecordId = e.id
      this.selectedType = e.type
      this.examStatus = e.examStatus
      //如果是内容层 需要记录 学习时间  初始化starttime
      if (e.type == 3 || e.type == 4) {
        //判断当前内容是否学习中  只有学习中状态 才记录时间  如若是其他状态将studyStartTime清空
        if (e.studyStatus == 1) {
          this.studyStartTime = new Date().getTime()
        } else {
          this.studyStartTime = null
        }
      }
    },
    //获取目录树
    async getCourseStudyInfo(type) {
      this.treeloading = true
      let res = await getCourseStudyInfo(this.$route.query.courseStuId)
      const { code, data } = res
      if (code == 200) {
        this.treeloading = false
        this.dirName = data.dirName
        this.leaderId = data.leaderId
        this.courseName = data.courseName
        this.courseType = data.courseType
        this.courseIndexTree = formatTreeData(data.indexStuList)
        if(this.selectedId && type=='activated'){
          //判断当前内容层是否在树结构中
          let item = findItemById(this.selectedId, this.courseIndexTree, "indexId", "children")
          console.log('findItemById', item)
          if (item){
            this.$nextTick(()=>{
              if (item.type == 3 || item.type == 4) {
                this.$refs.content_ref.getInfo()
              } else {
                this.$refs.task_ref.getInfo()
              }
            })
          }else {
            //获取同级item
            let siblingItem = getSiblingItem(this.courseIndexTree, this.selectedId);
            console.log('getSiblingItem', siblingItem)
            if (siblingItem) {
              this.cacheIndexId = siblingItem.indexId;
              this.handleClick(siblingItem);
            }
          }
        }
      }
    }
  },
  activated() {
    this.getCourseStudyInfo('activated')
  },
  async deactivated() {
    //判断是否有开始  说明还未记录学习时间
    if (this.studyStartTime) {
      let studyTimeData = (new Date().getTime() - this.studyStartTime) / 1000
      recordStudyTime(this.studyRecordId, Math.ceil(studyTimeData)).then(
        (res) => {
          if (res.code == 200) {
            console.log('记录学习时间:', studyTimeData)
            this.studyStartTime = null
          }
        }
      )
    }
  },
  created() {
    this.getCourseStudyInfo()
  },
  mounted() {
    // 第一次进入页面 存入缓存列表
    if (this.$store.getters.keepTab.indexOf(this.$route.name) == -1) {
      this.$store.dispatch('SetKeepTab', [this.$route.name])
    }
    this.courseSchedulingId = this.$route.query.courseSchedulingId
  }
}
</script>
<style scoped lang="scss">
.statusblock {
  left: -73px;
  top: 10px;

  .status {
    width: 56px;
    height: 16px;
    background: #ea3555;
    border-radius: 12px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC, sans-serif;
    font-weight: 400;
    color: #ffffff;
    line-height: 16px;
    text-align: center;
  }
}

.handlesbtn {
  right: 40px;
  bottom: 32px;

  .btn {
    margin-left: 16px;
    width: 100px;
    height: 40px;
    border-radius: 12px;
    text-align: center;
    font-size: 16px;
    font-family: PingFangSC-Semibold, PingFang SC, sans-serif;
    font-weight: 600;
    color: #ffffff;
    line-height: 40px;
  }

  .btnend {
    text-align: center;
    margin-left: 16px;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC, sans-serif;
    font-weight: 400;
    line-height: 38px;
    width: 152px;
    height: 40px;
    background: #ffffff;
    border-radius: 12px;
    box-sizing: border-box;
  }

  .btn1 {
    // background: linear-gradient(313deg, #559bea 0%, #578bfe 100%);
    background: linear-gradient(180deg, #84dcff 0%, #4bb6ff 100%);
  }

  .btn1end {
    color: #559bea;
    border: 1px solid #559bea;
  }

  .btn2 {
    background: linear-gradient(180deg, #8ffebe 0%, #03dec8 99%);
  }

  .btn2end {
    color: #28b28b;
    border: 1px solid #28b28b;
  }

  .btn3 {
    background: linear-gradient(360deg, #ffc64e 0%, #ffdc77 100%);
  }

  .btn3end {
    color: #fb9a55;
    border: 1px solid #fb9a55;
  }
}

.chapterInfo {
  .content {
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC, sans-serif;
    font-weight: 400;
    color: #999999;
    line-height: 22px;
  }

  .title {
    margin: 39px 0 13px 0;
    font-size: 16px;
    font-family: PingFangSC-Semibold, PingFang SC, sans-serif;
    font-weight: 600;
    color: #333333;
    line-height: 22px;
  }

  .step {
    .teachingContentTip {
      margin-top: 13px;
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
      font-weight: 400;
      color: #999999;
      line-height: 22px;
    }

    .filestip {
      margin-top: 40px;
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
      font-weight: 400;
      color: #333333;
      line-height: 22px;
    }

    .file {
      margin: 20px 98px 0 0;

      img {
        width: 32px;
        height: 32px;
        margin-right: 16px;
      }

      .name {
        width: 149px;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC, sans-serif;
        font-weight: 400;
        color: #333333;
        line-height: 32px;
      }
    }

    .file:nth-of-type(3n) {
      margin: 20px 0 0 0;
    }

    .files {
    }
  }
}

.task {
  box-sizing: border-box;
  height: calc(100vh - 240px);
  overflow: auto;
  margin: 12px 0 24px;
  padding: 0 6px 0 15px;

  .type {
    right: -60px;
    top: 10px;
    width: 45px;
    height: 16px;
    border-radius: 12px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC, sans-serif;
    font-weight: 400;
    line-height: 16px;
    text-align: center;
  }

  .statustipimg {
    top: 10px;
    left: -11px;
    width: 16px;
    height: 16px;
  }

  .statustip {
    top: 14px;
    left: -3px;
    width: 8px;
    height: 8px;
    border-radius: 4px;
  }
}

.titleslot {
  align-items: center;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC, sans-serif;
  font-weight: 400;
  color: #333333;
  line-height: 72px;
  box-sizing: border-box;

  .pass {
    color: #28b28b;
  }

  .acting {
    color: #f38f19;
  }

  .nopass {
    color: #e95756;
  }
}

.mt_0 {
  margin-top: 0 !important;
}

//富文本回显样式
::v-deep h5,
.h5 {
  font-size: 14px;
}

::v-deep h4,
.h4 {
  font-size: 16px;
  font-weight: bold;
}

::v-deep h3,
.h3 {
  font-size: 18px;
  font-weight: bold;
}

::v-deep h2,
.h2 {
  font-size: 20px;
  font-weight: bold;
}

::v-deep h1,
.h1 {
  font-size: 22px;
  font-weight: bold;
}

::v-deep i {
  font-style: italic;
}

::v-deep .w-e-toolbar .w-e-menu i {
  font-style: normal;
}

::v-deep ol {
  list-style-type: decimal;
}

/* ul ol 样式 */
::v-deep ol {
  margin: 10px 0 10px 22px;
  list-style-type: decimal;
}

::v-deep ul {
  margin: 10px 0 10px 22px;
  list-style-type: disc;
}

/* table 样式 */
::v-deep table {
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
}

::v-deep table td,
::v-deep table th {
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  padding: 3px 5px;
  height: 32px;
}

::v-deep table th {
  border-bottom: 2px solid #ccc;
  text-align: center;
  background-color: #f1f1f1;
}

/* blockquote 样式 */
::v-deep blockquote {
  display: block;
  border-left: 8px solid #d0e5f2;
  padding: 5px 10px;
  margin: 10px 0;
  line-height: 1.4;
  min-height: 24px;
  font-size: 100%;
  background-color: #f1f1f1;
}

/* code 样式 */
::v-deep code {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  background-color: #f1f1f1;
  border-radius: 3px;
  padding: 3px 5px;
  margin: 0 3px;
}

::v-deep pre code {
  display: block;
}

::v-deep a {
  text-decoration: underline;
  color: #5592e5;
}

.allExpand {
  width: 74px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  user-select: none;
  padding: 0 10px;
  box-sizing: border-box;

  .btns {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC, sans-serif;
    font-weight: 400;
    color: #666666;
    line-height: 32px;

    img {
      margin: 0 4px 0 0;
      width: 16px;
      height: 16px;
    }
  }
}

.group_enter_icon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  cursor: pointer;
  user-select: none;
}
</style>
